// #ifdef H5
import html2canvas from "html2canvas"
// #endif
// import StaticObj from '@/static/image/index'
/**
 * 绘图
 */
const draw = ({
	that,
	canvasId, 
	// 绘制动作
	drawAction,
	width, height, // 画布的宽高
	destWidth, destHeight, // 输出图片的宽高
	success,
	fail,
} = {}) => {
	const context = uni.createCanvasContext(canvasId, that)
	// 绘制动作
	drawAction && drawAction(context)
	// 绘制完成
	context.draw(true, () => {
		uni.canvasToTempFilePath({
			canvasId, useCORS: true, x: 0, y: 0, // 画布起点
			width, height, // 画布的宽高
			destWidth, destHeight, // 输出图片的宽高
			fileType: 'png', // 目标文件的类型，只支持 'jpg' 或 'png'。默认为 'png'
			quality: 1.0, // 图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
			success: (res) => {
				// #ifdef MP-WEIXIN
				// 在小程序下tempFilePath就是url，不需要转换
				success && success(res.tempFilePath)
				// #endif
				// #ifndef MP-WEIXIN
				// 以下三种方式都可以
				
				// 方法一：直接返回base64。数据量大
				// this.$emit('success', res.tempFilePath)
				// return
				
				// 方法二：自己实现base64转本地文件
				const base64ToBlob = (base64Data) => {
					let arr = base64Data.split(','),
					fileType = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					l = bstr.length,
					u8Arr = new Uint8Array(l);
					while (l--) {
						u8Arr[l] = bstr.charCodeAt(l)
					}
					return new Blob([u8Arr], {
						type: fileType
					})
				}
				const imgUrl = URL ? URL.createObjectURL(base64ToBlob(res.tempFilePath)) : res.tempFilePath
				success && success(imgUrl)
				// #endif
			},
			fail: (err) => {
				console.log(err)
				fail && fail(err)
			}
		}, that)
	})
}

/**
 * 将组件转换为图片
 * ref：该组件的ref对象
 * fileName：保存的图片名称，如果存在将直接保存下来
 * ref：该组件的ref对象，可以是ref对象也可以是id对象，如果是id对象则使用document.querySelector('#id')
 * fileName：保存的图片名称，如果存在将直接保存下来
 */
const fromDiv = (ref, fileName) => {
	if (ref.$el) { // 被重新定义过的ref对象，有一层$el
		ref = ref.$el
	}
	// const {offsetWidth, offsetHeight} = ref
	return new Promise((resolve, reject) => {
		// #ifdef H5 
		html2canvas(ref, { // https://html2canvas.hertzen.com/
			useCORS: true, // 是否尝试使用CORS从服务器加载图像
			
			allowTaint: false, // 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
			backgroundColor: null, // 画布背景色（如果未在DOM中指定）。设置null为透明
			canvas: null, // 现有canvas元素用作绘图的基础
			foreignObjectRendering: false, // 如果浏览器支持，是否使用ForeignObject渲染。经测试，true时只截取了右下角约四分之一的区域
			imageTimeout: 15000, // 加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。
			ignoreElements: (element) => false, // 谓词功能，可从渲染中删除匹配的元素
			logging: true, // 启用日志以进行调试
			onclone: null, // 克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容，而不会影响原始源文档。
			proxy: null, // 代理将用于加载跨域图像的网址。如果保留为空，则不会加载跨域图像。
			removeContainer: true, // 是否清除html2canvas临时创建的克隆DOM元素
			// scale: window.devicePixelRatio, // 用于渲染的比例。默认为浏览器设备像素比率。（图片清晰控制）
			// width: Element.width, // canvas的宽度
			// height: Element.height, // canvas的高度
			// x: Element.x-offset, // 裁剪画布X坐标
			// y: Element.y-offset // 裁剪画布Y坐标
			// scrollX: Element.scrollX, // 渲染元素时要使用的x滚动位置（例如，如果Element使用position: fixed）
			// scrollX: Element.scrollY, // 呈现元素时要使用的y-scroll位置（例如，如果Element使用position: fixed）
			// windowWidth: Window.innerWidth, // 渲染时使用的窗口宽度Element，这可能会影响媒体查询之类的内容
			// windowHeight: Window.innerHeight, // 渲染时要使用的窗口高度Element，这可能会影响媒体查询之类的内容
		}).then(canvas => {
		    // 转成图片，生成图片地址
		    const imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
			if (fileName) {
				const tmpa = document.createElement('a')
				tmpa.download = fileName
				tmpa.href = imgUrl
				document.body.appendChild(tmpa)
				tmpa.click()
				document.body.removeChild(tmpa)
			}
			resolve(imgUrl)
		}).catch(reject)
		// #endif
	})
}

module.exports = {
	// 固定图片
	StaticObj: {},
	
	draw,
	fromDiv,
}